<html>
<head>
<style type="text/css">
body, html {
    margin: 0;
    width: 100%;
    height: 100%;
}
#image {
    position: absolute;
}
#banner {
    position: fixed;
    bottom: 0;
    background-color: rgba(90%,90%,90%,0.8);
    color: #000;
    text-align: left;
    font-smooth: always;
    height: 3em;
    width: 100%;
}
#title {
    font-size: 1.2em;
    margin-top: 0.2em;
    margin-right: 0.6em;
    margin-left: 0.6em;
}
/* No wordwrap - we will measure and shrink to fit */
.shrinkfit {
    white-space: nowrap;
    -webkit-transform-origin: top left;
}
</style>

<script type="text/javascript" src="qrc:/webvfx/scripts/easing.js"></script>

<script type="text/javascript">
function Banner() {
    this.image = document.getElementById("image");
    this.banner = document.getElementById("banner");

    var fadeIn = webvfx.getNumberParameter("FadeIn");
    if (fadeIn > 0) {
        this.easeFadeIn = new WebVfx.Easing.Linear(0, 1, fadeIn);
        this.fadeIn = fadeIn;
    }
    var fadeOut = webvfx.getNumberParameter("FadeOut");
    if (fadeOut > 0) {
        this.easeFadeOut = new WebVfx.Easing.Linear(0, 1, fadeOut);
        this.fadeOut = fadeOut;
    }
}

Banner.prototype.render = function (time) {
    webvfx.getImage("sourceImage").assignToHTMLImageElement(this.image);
    if (time <= this.fadeIn)
        this.banner.style.opacity = this.easeFadeIn.ease(time);
    else if (time >= 1 - this.fadeOut)
        this.banner.style.opacity = this.easeFadeOut.ease(1 - time);
    else
        this.banner.style.opacity = 1;
}

function init() {
    // Set these before we resize
    document.getElementById("title").innerText = webvfx.getStringParameter("Title");

    resize();

    var banner = new Banner();
    webvfx.renderRequested.connect(banner, Banner.prototype.render);
    webvfx.imageTypeMap = { "sourceImage" : webvfx.SourceImageType };
    webvfx.readyRender(true);
}

function shrinkToFit(element) {
    element.style.webkitTransform = null;
    if (element.scrollWidth > element.clientWidth)
        element.style.webkitTransform = "scale(" + (element.clientWidth / element.scrollWidth) + ")";
}

function resize() {
    // Set base font-size to 10% of window height
    document.body.style.fontSize = (window.innerHeight * 0.1) + "px";

    // Scale text - shrink to fit - if needed
    shrinkToFit(document.getElementById("title"));
}

window.addEventListener("resize", resize, false);
window.addEventListener("load", init, false);
</script>
</head>
<body>
    <img id="image"/>
    <div id="banner">
        <div id="title" class="shrinkfit"></div>
    </div>
</body>
</html>
